<template>
  <div class="page_box">
    <ul class="uls_page">
      <li class="home" @click="home">首页</li>
      <li class="pre" @click="pret">上一页</li>
      <div class="pagebtn_box">
        <li
          class="page"
          v-for="(items, index) of jinqis"
          :key="index"
          ref="li"
          @click="pagebtn"
        >
          {{items}}
        </li>
      </div>
      <div class="box">
        <li class="next" @click="next">下一页</li>
        <li class="end" @click="end">尾页</li>
        <li class="pageCount">共{{pageCount}}页</li>
      </div>
    </ul>
  </div>
</template>

<script>
import { getHomeArticals } from 'com/shuju'
import { mapState } from 'vuex'
import { fenpage } from 'com/pages'
export default {
  name: 'ArticalPages',
  data () {
    return {
      pages: 0
    }
  },
  methods: {
    home () {
      this.pagebtn(0)
    },
    end () {
      this.pagebtn(parseInt(this.pageCount - 1))
    },
    next () {
      if (this.pages === parseInt(this.pageCount - 1)) {
        alert('已经是最后一页了')
      } else {
        this.pages += 1
        this.pagebtn('下一页')
      }
    },
    pret () {
      if (this.pages === 0) {
        alert('已经是第一页了')
      } else {
        this.pages -= 1
        this.pagebtn('上一页')
      }
    },
    pagebtn (pagesss) {
      if (pagesss === 0) {
        this.pages = 0
      } else if (pagesss === parseInt(this.pageCount - 1)) {
        this.pages = parseInt(this.pageCount - 1)
      } else if (pagesss === '下一页') {
        console.log(' ')
      } else if (pagesss === '上一页') {
        console.log(' ')
      } else {
        this.pages = parseInt(event.target.innerText - 1)
      }
      const datas = new FormData()
      datas.set('page', this.pages)
      console.log(parseInt(this.pages))
      datas.set('size', 5)
      datas.set('keywords', 'category')
      datas.set('categoryName', this.$store.state.articalDisplay)
      getHomeArticals(datas, this)
      if (this.pages < 4) {
        for (let j = 0; j < this.pageCount; j++) {
          this.$refs.li[j].style.left = j * 60 + 'px'
          this.$refs.li[j].style.backgroundColor = 'rgb(255,255,255)'
          this.$refs.li[j].style.color = 'rgb(0,0,0)'
        }
      } else if (this.pages >= 4 && this.pages <= parseInt(this.pageCount)) {
        for (let j = 0; j < this.pageCount; j++) {
          this.$refs.li[j].style.left = (j - this.pages + 2) * 60 + 'px'
          this.$refs.li[j].style.backgroundColor = 'rgb(255,255,255)'
          this.$refs.li[j].style.color = 'rgb(0,0,0)'
        }
      }
      this.$refs.li[this.pages].style.backgroundColor = 'rgb(15,113,213)'
      this.$refs.li[this.pages].style.color = 'rgb(255,255,255)'
    }
  },
  computed: {
    ...mapState({
      artis: 'artical'
    }),
    jinqis () {
      var pages = []
      for (var i = 0; i < Math.ceil(this.artis.tatal / 5); i++) {
        pages[i] = i + 1
      }
      return pages
    },
    pageCount () {
      return this.jinqis.length
    }
  },
  mounted () {
    fenpage(this.$refs.li, this.$refs.li.length)
  },
  updated () {
    if (this.pages < 3) {
      fenpage(this.$refs.li, this.$refs.li.length)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .page_box{
    position: absolute
    bottom: 0
    width: 800px
    height: 60px
    float: left
    margin-top: .3rem
    .uls_page{
      width: 100%
      height: auto
      position: relative
      list-style: none
      content:" ";
      display: table;
      clear:both;
      padding: 0
      margin: 0
      li{
        float: left
      }
      li + li{
        margin-left: .2rem
      }
      .pagebtn_box{
        position: absolute
        width: 430px
        height: 40px
        left: 150px
        text-overflow: ellipsis
        overflow: hidden
        white-space: nowrap
        .page{
          background-color: rgb(255,255,255)
          width: 40px
          height: 37px
          line-height: 40px
          text-align: center
          position: absolute
          display: inline-block
          border: 1px solid rgb(190,190,190)
          transition: all .5s
          cursor: pointer
        }
      }
      .page:nth-child(1){
        background-color: rgb(15,113,213)
        color: rgb(255,255,255)
      }
      .box{
        position: absolute
        width: 200px
        height: 30px
        right: 0
      }
      .pageCount{
        margin-top: .23rem
      }
      .next,
      .pre,
      .home,
      .end
      {
        background-color: rgb(255,255,255)
        padding: .2rem
        border: 1px solid rgb(190,190,190)
        cursor: pointer
      }
      .end:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .next:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .pre:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .page:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .end:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .home:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
    }
  }
</style>
